<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Laro 地图编辑器</title>
    <script src="../js/lib/leta.0.3.js"></script>
    <style>
        body {font-size: 14px; font-family: Microsoft Yahei; line-height: 2}
        .texture-container {border:2px dashed #aaa; min-height: 60px;padding: 10px; margin-bottom: 10px;}
        .texture-container img { margin-right: 6px; }
        .info {
            padding: 14px;
            font-size: 12px;
            background: #f3f3f3;
            color:#888;
            border:1px solid #aaa;
        }
        .edit-area {
            overflow:hidden;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            display: inline-block;
        }
        .rows {overflow:hidden; zoom:1}
        .grid {float: left; overflow:hidden;}
        .grid-inner {border-right:1px solid #e0e0e0; border-bottom:1px solid #e0e0e0}
    </style>
</head>

<body>
    <section class="doc" id="doc">
        <h1>Laro 地图编辑器</h1>
        <p class="info">
            适用于地图场景可以由一定大小的子元素拼接而成的情况。典型的像超级玛丽一类的横版通关游戏。
        </p>
        <ul>
            <li>
                图片资源相对路径: <input type="text" id="path-rel" />
                <input type="file" id="input-file" data-cmd="upload" />
            </li>
            <li>
                平铺背景色：<input type="text" id="bgcolor" />(不填为透明) 
                <button>设置</button>
            </li>

        </ul>

        <div id="texture-container" class="texture-container"></div>
        
        <div id="edit-area" class="edit-area">
        
        </div>
        
    </section>
    
    <script src="../js/map/leditor.map.js"></script>
    <script src="../js/map/leditor.map.editor.js"></script>
    <script src="../js/map/leditor.map.store.js"></script>
    <script src="../js/map/leditor.map.event.js"></script>
    <script>  
        Leta.domReady(function () { Leditor.map.init() })
    </script>
</body>
</html>
